<style>
    #role-list {margin-top: 50px; clear: both;padding-left: 10px;padding-top: 20px;}
    #role-list ul {list-style:none;padding:5px;overflow:auto;}
    #role-list li {list-style: none; float: left; margin-right: 10px;}
</style>
<?php $this->import('Header') ?>

<div class="row-fluid">
    <div class="block" id="role-list">
        <form method="post">
            <select name="groupId">
                <?php foreach($groupList as $v) : ?>
                    <option <?php if (isset($groupId) && $groupId == $v['AccountGroupId']) echo 'select'; ?> value="<?php echo $v['AccountGroupId'] ?>" roles="<?php echo $v['Roles'] ?>" ><?php echo $v['GroupName']; ?></option>
                <?php endforeach; ?>
            </select>
            <?php foreach($roleList as $key => $val) : ?>
            <h3><?php echo $key; ?></h3>
            <ul>
                <?php foreach($val as $k => $v) : ?>
                <li><label><input class="role-box" type="checkbox" name="roles[]" value="<?php echo $v; ?>" /><?php echo $k; ?></label></li>
                <?php endforeach; ?>
            </ul>
            <?php endforeach; ?>
            <div class="btn-toolbar">
                <button class="btn btn-primary"><i class="icon-save"></i> 保存</button>
            </div>
        </form>
    </div>
</div>
<?php $this->import('Footer') ?>
<script>
    (function() {
        var select = $('#role-list select');
        var roles = select.find('option:selected').attr('roles');
        var roleList = roles.split(',');
        initRoles(roleList);

        function initRoles(roleList) {
            var box = $('#role-list .role-box');
            box.attr('checked', false);
            box.each(function() {
                var v = $(this).val();
                for (var i in roleList) {
                    if (roleList[i] == v) {
                        $(this).attr('checked', true);
                        break;
                    }
                }
            });
        }

        select.bind('change', function() {
            var select = $('#role-list select');
            var roles = select.find('option:selected').attr('roles');
            var roleList = roles.split(',');
            initRoles(roleList);
        });
    })();
</script>
